<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Christmas_card1</title>
	<link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/s8PXdQ2.png">
	<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
	<style type="text/css">
		body {
		  font-size: 18px;
		  background-color: #e74c3c;
		  height: 100%;
		  margin: 0;
		  overflow: hidden;
		  font-family: "Arial","微軟正黑體";
		}

		h1 {
		  margin: 20px 20px 0 0;
		  color: white;
		  font-size: 42pt;
		  font-family: "Pacifico";
		  text-align: center;
		}

		.layer {
		  width: 100%;
		  height: 100%;
		}

		ul img {
		  display: block;
		  margin: 0;
		 
		}

		.container {
		  position: absolute;
		  margin: auto;
		  bottom: 0;
		  width: 100%;
		  z-index: -1;
		}

		.scene {
		  padding: 0;
		  margin: 0;
		}

		.giftbox {
		  width: 55px;
		  height: 70px;
		  position: absolute;
		  z-index: 1;
		  cursor: pointer;
		  top: 150px;
		  left: 15px;
		  background-image: url(http://i.imgur.com/Yi9jqTy.png);
		  background-size: 100%;
		  background-repeat: no-repeat;
		}

		.giftbox::after {
		  content: '';
		  position: absolute;
		  color: #fff;
		  width: 100%;
		  font-size: 24px;
		  z-index: 1;
		}

		#snowfall {
		  z-index: 1;
		  position: absolute;
		}

		#im {
		  padding-right: 970px;
		}

		#im1 {
		  padding-left: 970px;
		  position: absolute;
		  z-index: 1;
		}

		#im2 {
		  padding-left: 1940px;
		  position: absolute;
		  z-index: 1;
		}

		#im3 {
		  padding-left: 2910px;
		  position: absolute;
		  z-index: 1;
		}

		#im4 {
		  padding-left: 3880px;
		  position: absolute;
		  z-index: 1;
		}

		#im5 {
		  padding-left: 4850px;
		  position: absolute;
		  z-index: 1;
		}

		#im6 {
		  padding-left: 5820px;
		  position: absolute;
		  z-index: 1;
		}

		.scene {
		  margin: 185px 0 0 0;
		}

		.can {
		  padding: 1px;
		}

		.song img {
		  position: absolute;
		  z-index: 1;
		  cursor: pointer;
		  top: 203px;
		  left: 13px;
		}

		.letter{
		  width:45%;
		  color:#333;
		  background-color:rgba(255,255,255,0.6);
		  border-radius:5px;
		  margin:3em auto;
		  font-size:16px;
		  padding:20px;
		  line-height:1.5em;
		  z-index:99999;
		  height: 100%;
		}

		.letter p{
		    width:50%;
		    float:left;
		    margin:0 20px 0 0;
		    text-align: justify;
		    min-height:300px;
		    word-wrap: break-word;
			word-break: break-all;
		}

		.photo{
		  height:300px;
		  overflow:hidden;
		  border-radius:3px;
		}

		.photo img{
		  width:100%;
		  float:right;
		}

		.clearfix:before, .clearfix:after { 
		   content: "";
		   display: table; 
		}
		.clearfix:after {
		   clear: both; 
		}
		.clearfix { 
		   zoom: 1; /* IE6&7 */ 
		}

		@media only screen and (min-width: 320px) and (max-width: 768px) {
		  
		  .giftbox {
		  top: 20px;
		  left: 20px;
		 }    
		  
		  .song img {
		  top: 20px;
		  left: 62px;
		  }

		  h1{
		  	font-size: 25pt;
		  	margin: 95px auto 10px auto;
		  }
		  .letter{
		  	width: 80%;
		  	margin: 1.5em auto;
		  	height: 385px;
		  }
		  
		}

		@media screen and (max-width: 320px) {
			body{
				overflow-y: scroll;
			}
		  
		  .giftbox {
		  top: 20px;
		  left: 20px;
		 }    
		  
		  .song img {
		  top: 20px;
		  left: 62px;
		  }
		  
		  .container{
		  	display: none;
		  }

		  h1{
		  	font-size: 25pt;
		  	margin: 95px auto 10px auto;
		  }
		  .letter{
		  	width: 80%;
		  	margin: 1.5em auto;
		  	height: 100%;
		  }
		  .letter p{
		  	float: none;
		  	width: 100%;
		  	height: auto;
		  }
		  .photo{
			  height:auto;
			  margin-top: 20px;
			}
		  .photo img{
			width:100%;
			float:none;
			border-radius: 3px;
		  }

		}
		
	</style>
</head>
<body>
	<header>
		<div class="can"> <canvas id="snowfall"></canvas></div>
	</header>	
	<nav>
		<div id="merrywrap" class="merrywrap">
			<div class="giftbox"></div>
		</div>
	</nav>
	<section>	
		<h1>Merry Christmas!</h1>
	    <div class="letter clearfix">
	      <p id="preview_text">
	        用自己的照片做「筆記本」真是太棒了!選張喜歡的照片、打上標題，原來筆記本的主題也可以自己決定!用自己用自己的照片做「筆記本」真是太棒了!選張喜歡的照片、打上標題，原來筆記本的主題也可以自己決定!用自己用自己的照片做「筆記本」真是太棒了!選張喜歡的照片、打上標題，原來筆記本的主題也可以自己決定!用自己用自己的照片做「筆記本」真是太棒了!選張喜歡的照片、打上標題，原來筆記本的主題也可以自己決定!用自己用自己的照片做「筆記本」真是太棒了!選張喜歡的照片、打上標題，原來筆記本的主題也可以自己決定!用自己用自己的照片做「筆記本」真是太棒了!選張喜歡的照片、打上標題，原來筆記本的主題也可以自己決定!用自己
	      </p>
	      <div class="photo clearfix">
	        <img src="http://i.imgur.com/KJErNWV.jpg" id="preview_img">
	      </div>
	    </div>
		<div id="container" class="container">
			<ul id="scene" class="scene">
				<li class="layer" id="im"data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im1" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im2" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im3" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im4" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im5" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im6" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
			</ul>
		</div>
	</section>
	
	<script src="http://jsbin.com/moduwa/1.js"></script>
</body>
</html>